<template>

  <div class="trademark-container container z">
    <div class="top">
      <div class="box1">
        <div class="search">
          <input id="search" class="input" v-model="trademarkName" type="text" placeholder="请输入商标内容"/>
          <div class="all" @click="selCate">
            <span class="">|</span>
            <span class="">{{title}}</span>
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>
        <span class="title" @click="search">查询商标</span>
      </div>
      <div class="cate">
        <div class="mui-input-row mui-radio mui-left">
          <label>商标名</label>
          <input v-model="selected" name="radio1" type="radio" value="商标名">
        </div>
        <div class="mui-input-row mui-radio mui-left">
          <label>申请人</label>
          <input v-model="selected" name="radio1" type="radio" value="申请人">
        </div>
        <div class="mui-input-row mui-radio mui-left">
          <label>注册号</label>
          <input v-model="selected" name="radio1" type="radio" value="注册号">
        </div>
      </div>
      <!--<div class="info">-->
      <!--2018版商标分类表-->
      <!--</div>-->
    </div>
    <!--内容部分-->
    <!--您所需要的 正是我们擅长的-->
    <div class="tb-content tb-c1" style="position: relative;">
      <h3 class="desc-h3">
        <span class="desc-title" style="left: 59px;">您所需要的 正是我们擅长的</span>
        <div class="border"></div>
      </h3>
      <div class="swiper-container swiper-container1 f-change" style="width: 5.2rem;height: 4.9rem;">
        <div class="swiper-wrapper">
          <div class="tb-reg swiper-slide">
            <div class="reg-top">
              <div class="reg-top-img f-left">
                <i class="icon icon1"></i>
                <p class="f-change-desc">普通注册</p>
              </div>
              <div class="reg-top-desc f-right mt-20">
                <p>•&nbsp;&nbsp;自助提交，1-2个工作日拿到申请号</p>
                <p>•&nbsp;&nbsp;专业审核员评估注册风险</p>
                <p>•&nbsp;&nbsp;确认风险再提交</p>
              </div>
              <p class="reg-desc-title">
                <span class="rd-txt2 f-right"><i class="red">￥800</i>/件</span>
              </p>
            </div>
            <a @click="open" class="now-reg-btn">立即注册</a>
          </div>
          <div class="tb-reg baomu-reg swiper-slide">
            <div class="reg-top">
              <div class="reg-top-img f-left">
                <i class="icon"></i>
                <p class="f-change-desc">保姆注册</p>
              </div>
              <div class="reg-top-desc f-right mt-20">
                <p>•&nbsp;&nbsp;一对一顾问，申请前查询，避免风险</p>
                <p>•&nbsp;&nbsp;申报材料整理与填报、所有流程代办</p>
              </div>
              <p class="reg-desc-title">
                <span class="rd-txt2 f-right"><i class="red">￥1000</i>/件</span>
              </p>
            </div>
            <a @click="open" class="now-reg-btn">立即注册</a>
          </div>
          <div class="tb-reg danbao-reg swiper-slide">
            <div class="reg-top">
              <div class="reg-top-img f-left">
                <i class="icon"></i>
                <p class="f-change-desc">担保注册</p>
              </div>
              <div class="reg-top-desc f-right mt-20">
                <p>•&nbsp;&nbsp;申请审查专业人士全程护航</p>
                <p>•&nbsp;&nbsp;注册不成功退全款（含官费）</p>
                <p>•&nbsp;&nbsp;顾问评估担保条件，不满足条件可转普通注册</p>
              </div>
              <p class="reg-desc-title">
                <span class="rd-txt2 f-right"><i class="red">￥2000</i>/件</span>
              </p>
            </div>
            <a @click="open" class="now-reg-btn">立即注册</a>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev swiper-button-blue swiper-button-prev1" style="opacity:0.8;width:0.36rem;left: 0.1rem;z-index: 1000;top: 56%;background-size: contain;"></div>
      <div class="swiper-button-next swiper-button-blue swiper-button-next1" style="opacity:0.8;width:0.36rem;right: 0.1rem;z-index: 1000;top: 56%;background-size: contain;"></div>
    </div>
    <!--热门服务项目-->
    <div class="tb-content tb-c2">
      <h3 class="desc-h3" style="margin-bottom:0;">
        <span class="desc-title">商标服务</span>
        <div class="border"></div>
      </h3>
      <ul class="item-list clearfix">
        <li class="item-li">
          <a >
            <div class="samll-img">
              <img src="../../../static/img/icon_brand_xuzhan.png" width="100%" height="100%" />
            </div>
            <p class="item-title">商标续展</p>
            <p class="red">￥2000/件</p>
          </a>
        </li><li class="item-li">
        <a >
          <div class="samll-img">
            <img src="../../../static/img/icon_brand_beian.png" width="100%" height="100%" />
          </div>
          <p class="item-title">商标许可备案</p>
          <p class="red">￥510/件</p>
        </a>
      </li><li class="item-li">
        <a >
          <div class="samll-img">
            <img src="../../../static/img/icon_brand_zhuanrang.png" width="100%" height="100%" />
          </div>
          <p class="item-title">商标转让</p>
          <p class="red">￥1500/件</p>
        </a>
      </li><li class="item-li">
        <a >
          <div class="samll-img">
            <img src="../../../static/img/icon_brand_biangeng.png" width="100%" height="100%" />
          </div>
          <p class="item-title">商标变更</p>
          <p class="red">￥1000/件</p>
        </a>
      </li><li class="item-li">
        <a >
          <div class="samll-img">
            <img src="../../../static/img/icon_brand_zhuxiao.png" width="100%" height="100%" />
          </div>
          <p class="item-title">商标注销</p>
          <p class="red">￥1350/件</p>
        </a>
      </li><li class="item-li">
        <a >
          <div class="samll-img">
            <img src="../../../static/img/icon_brand_yiyi.png" width="100%" height="100%" />
          </div>
          <p class="item-title">商标异议</p>
          <p class="red">￥2000/件</p>
        </a>
      </li>					</ul>
      <!-- <div class="look_more">
                        <a href="/trademark/services"><div class="more"> 查看更多<img src="../../../static/img/next_page.png" alt=""></div></a>

                        </div> -->
      <div class="look_more">
        <div class="look_more_mh">
          <b class="look_left"></b>
          <router-link to="/">查看更多服务<img src="../../../static/img/next-page-before.png" alt="" class="before"><img src="../../../static/img/next_page.png" alt="" class="after"></router-link>
          <b class="look_right" style="right:0"></b>
        </div>
      </div>

    </div>
    <!--专利服务-->
    <div class="zl-service">
      <h3 class="desc-h3">
        <span class="desc-title">专利服务</span>
        <div class="border"></div>
      </h3>
      <div class="zl-content">
        <div class="zl-li">
          <a >
            <img src="../../../static/img/icon_brand_faming.png"/>
            <h3>专利发明</h3>
            <p>提供全面保护</p>
            <div class="price"><span>¥9900</span>/件</div>
          </a>
        </div>
        <div class="zl-li">
          <a >
            <img src="../../../static/img/icon_brand_shiyong.png"/>
            <h3>实用新型专利</h3>
            <p>小发明或小专利</p>
            <div class="price"><span>¥3000</span>/件</div>
          </a>
        </div>
        <div class="zl-li">
          <a >
            <img src="../../../static/img/icon_brand_waiguan.png"/>
            <h3>外观设计专利</h3>
            <p>形状、图案与色彩创新</p>
            <div class="price"><span>¥1650</span>/件</div>
          </a>
        </div>
        <div class="zl-li">
          <a >
            <img src="../../../static/img/icon_brand_zhuanlibohui.png"/>
            <h3>专利驳回复审</h3>
            <p>扭转局面的救济途径</p>
            <div class="price"><span>¥6750</span>/件</div>
          </a>
        </div>
      </div>
      <div class="look_more" style="margin-top:0.2rem">
        <div class="look_more_mh">
          <b class="look_left"></b>
          <router-link to="/">查看更多服务<img src="../../../static/img/next-page-before.png" alt="" class="before"><img src="../../../static/img/next_page.png" alt="" class="after"></router-link>
          <b class="look_right" style="right:0"></b>
        </div>
      </div>
    </div>
    <!--版权服务-->
    <div class="bq-service">
      <h3 class="desc-h3">
        <span class="desc-title">版权服务</span>
        <div class="border"></div>
      </h3>
      <div class="bq-content">
        <div class="bq-li">
          <div class="left">
            <h3>美术作品登记</h3>
            <p>维护你的创意灵感</p>
          </div>
          <div class="right">
            <p class="price-p"><span>¥900</span>/件</p>
            <a @click="open"  class="now-btn">立即办理</a>
          </div>
        </div>
        <div class="bq-li">
          <div class="left">
            <h3>文字作品登记</h3>
            <p>防止原创作品被抄袭复制</p>
          </div>
          <div class="right">
            <p class="price-p"><span>¥900</span>/件</p>
            <a  @click="open"   class="now-btn">立即办理</a>
          </div>
        </div>
        <div class="bq-li">
          <div class="left">
            <h3>软件著作权登记</h3>
            <p>保护软件开发创意成果</p>
          </div>
          <div class="right">
            <p class="price-p"><span>¥900</span>/件</p>
            <a  @click="open"   class="now-btn">立即办理</a>
          </div>
        </div>
      </div>
      <div class="look_more" style="margin-top:0.2rem">
        <div class="look_more_mh">
          <b class="look_left"></b>
          <router-link to="/">查看更多服务<img src="../../../static/img/next-page-before.png" alt="" class="before"><img src="../../../static/img/next_page.png" alt="" class="after"></router-link>
          <b class="look_right" style="right:0"></b>
        </div>
      </div>
    </div>
    <PromotionFooter></PromotionFooter>
  </div>
</template>

<script>
  import PromotionFooter from './child/PromotionFooter'

  export default {
    name: "promotionTrademarkNew",
    components: {PromotionFooter},
    data: function () {
      return {
        trademarkName: '',
        selected: '商标名',
        title: '全部分类',
        gjfl:0
      }
    },
    mounted: function () {
      setTimeout(function () {
        new Swiper('.swiper-container1', {
          loop: true,
          pagination: '.swiper-pagination',
          autoplay: 300000,
          paginationClickable: true,
          prevButton:'.swiper-button-prev1',
          nextButton:'.swiper-button-next1',
        });
      }, 100)
    },
    methods: {
      selCate() {
        var that = this;
        layer.open({
          content: '<div class="tip-bg">' +
          '<div class="inquire-box clearfix">' +
          '<ul class="clearfix">' +
          '<li data-value="0">全部分类</li>' +
          '<li data-value="1">化学原料</li>' +
          '<li data-value="2">颜料油漆</li>' +
          '<li data-value="3">日化用品</li>' +
          '<li data-value="4">燃料油脂</li>' +
          '<li data-value="5">医药卫生</li>' +
          '<li data-value="6">五金金属</li>' +
          '<li data-value="7">机械设备</li>' +
          '<li data-value="8">手工器械</li>' +
          '<li data-value="9">科学仪器</li>' +
          '<li data-value="10">医疗器械</li>' +
          '<li data-value="11">家用电器</li>' +
          '<li data-value="12">运输工具</li>' +
          '<li data-value="13">军用烟花</li>' +
          '<li data-value="14">珠宝钟表</li>' +
          '<li data-value="15">乐器</li>' +
          '<li data-value="16">文化用品</li>' +
          '<li data-value="17">橡胶制品</li>' +
          '<li data-value="18">皮革皮具</li>' +
          '<li data-value="19">建筑材料</li>' +
          '<li data-value="20">家具</li>' +
          '<li data-value="21">家用器具</li>' +
          '<li data-value="22">绳网袋篷</li>' +
          '<li data-value="23">纺织纱线</li>' +
          '<li data-value="24">床单布料</li>' +
          '<li data-value="25">服装鞋帽</li>' +
          '<li data-value="26">花边拉链</li>' +
          '<li data-value="27">地毯席垫</li>' +
          '<li data-value="28">体育玩具</li>' +
          '<li data-value="29">食品罐头</li>' +
          '<li data-value="30">调味茶糖</li>' +
          '<li data-value="31">水果花木</li>' +
          '<li data-value="32">啤酒饮料</li>' +
          '<li data-value="33">酒</li>' +
          '<li data-value="34">烟草烟具</li>' +
          '<li data-value="35">广告贸易</li>' +
          '<li data-value="36">金融物管</li>' +
          '<li data-value="37">建筑修理</li>' +
          '<li data-value="38">通讯电信</li>' +
          '<li data-value="39">运输旅行</li>' +
          '<li data-value="40">材料处理</li>' +
          '<li data-value="41">教育娱乐</li>' +
          '<li data-value="42">科研服务</li>' +
          '<li data-value="43">餐饮酒店</li>' +
          '<li data-value="44">医疗园艺</li>' +
          '<li data-value="45">社会法律</li>' +
          '</ul>' +
          '</div>' +
          '</div>'
          ,
          skin: 'alertbox',
          btn: '确定',
          shadeClose: false,
          success: function (elem) {
            $('.inquire-box ul li').each(function(){
              if($(this).data('value') == that.gjfl){
                $(this).addClass('li-active')
              }
            })

            // 单个选中
            $('.inquire-box ul').on('click','li',function(){
              $(this).toggleClass('li-active').siblings('li').removeClass('li-active');
              that.gjfl = $(this).data('value');
              that.title = $(this).text();
            })

          },
          /*确定按钮的回调函数，关闭弹层之后的回调函数,返回当前层的索引*/
          yes: function (index) {
            layer.close(index);
            that.init();
          }
        });
      },
      search() {
        if (!this.trademarkName){
          this.$msg('请输入查询内容');
          return;
        }

        $('.input').blur();
        this.$router.push({path: '/trademarklist', query: {trademarkName: this.trademarkName,gjfl: this.gjfl,title: this.title,selected: this.selected}});
      },
      //免费咨询
      open() {
        get_chat_event('advice')
        //_53App.talk('icon', '&zdkf_type=1&kf=1934734627%40qq.com&kflist=off')
      }
    }
  }
</script>

<style lang="less" scoped>
  @bg: #5560b2;
  @fc: #ff9d42;
  @blue: #40afff;
  @red: #e23839;
  .z {
    z-index: 100001;
    padding-bottom: 1.1rem
  }

  h3  {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
    font-style: normal;
  }
  .top {
    height: 3rem;
    background-color: @bg;
    padding: 0 0.6rem;
    padding-top: 0.6rem;
    .box1 {
      display: flex;
      .search {
        flex: 1;
        position: relative;
      }

      .search .all {
        position: absolute;
        right: 0.05rem;
        top: 0;
        height: 0.86rem;
        line-height: 0.86rem;
        color: #BBB;
        span:first-child {
          font-size: 0.35rem;
        }
        span:nth-child(2) {
          font-size: 0.28rem;
          color: #666;
        }
        span:nth-child(3) {
          font-size: 0.3rem;
          color: #666;
        }
      }

      .search input {
        display: inline-block;
        margin: 0;
        padding: 0;
        padding-left: 0.15rem;
        padding-right: 1.8rem;
        border-radius: 5px 0 0 5px;
        height: 0.86rem;
        border: 1px solid #E1E1E1;
        border-right: none;
        font-size: 0.28rem;
      }
      .mui-icon-search:before {
        font-size: 0.28rem;
      }
      .title {
        display: inline-block;
        width: 1.6rem;
        line-height: 0.86rem;
        height: 0.86rem;
        font-size: 0.28rem;
        text-align: center;
        background-color: #59C7F9;
        color: white;
        border-radius: 0 5px 5px 0;
        border: 1px solid #59C7F9;
      }
    }
    .cate {
      padding-top: 0.4rem;
      display: flex;
      color: white;
      justify-content: space-between;
      .mui-radio input[type='radio']:before {
        position: absolute;
        content: '';
        display: inline-block;
        border: 3px solid white;
        width: 0.2rem;
        height: 0.2rem;
        border-radius: 50px;
        background-color: #fff;
        top: 0.1rem;
      }
      .mui-radio.mui-left input[type='radio'] {
        left: 0;
      }
      .mui-radio input[type='radio']:checked:before {
        background-color: black;
      }
      .mui-radio.mui-left label {
        margin-right: 0;
        padding-right: 0;
        padding-left: 25px;
        font-size: 0.28rem;
        padding-bottom: 0.15rem;
      }
    }
    .info {
      color: @fc;
      text-align: center;
      font-size: 0.28rem;
    }
  }
  .trademark-container {
    background-color: #f5f5f5;
  }
  .tb-c2{
    margin-bottom: 0.3rem;
    margin-top: 0.3rem;
    ol, ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .red {
      color: #f00909;
    }
    p {
      margin-bottom: 0;
    }
    .item-title {
      color: #333;
    }

    .zl-li p {
      margin-bottom: 0;
    }
    .zl-li .price {
      font-size: .36rem;
      color: #666;
    }
  }

  .tb-c1 {
    p {
      margin: 0;
    }
    .mt-20 {
      margin-top: 0.2rem;
    }
    .red {
      color: #f00909;
      font-style: normal;
    }
  }

</style>
